<%@ page language="java" pageEncoding="UTF-8"%><%@ include
	file="/WEB-INF/commons/taglibs.jsp"%>
<script type="text/javascript">
$('html').addClass('hideDialogs');
$(function(){
	var counter = 0;
	var $dialog = $('#edit-node-dialog').dialog({
		autoOpen: false,
		width: 360,
		height: 260,
		modal: true,
		buttons: {
			Save: function(){if(saveNode()){$(this).dialog('close');}},
			Cancel: function(){$(this).dialog('close');}
		},
		open: function(){$('#name').focus();},
		close: function(){
			var uid=$('#uid').val();
			if($('#'+uid+'_data').length<=0){
				$('#'+uid).remove();
			}
			$('form')[0].reset();}
	});
	$('#pipeline').droppable({
		accept: '.node',
		drop: function(event,ui){$dialog.dialog('open');}
	});
	$('#pipeline').sortable({
		revert: true,
		update: function(event, ui){}
	});
	$('#nodeList .node').draggable({
		connectToSortable: '#pipeline',
		helper: 'clone',
		revert: 'invalid',
		stop: function(event,ui) {
			var uid=$(event.target).attr('id');
			var newUid=uid+'_'+counter;
			$('#pipeline #'+uid).attr('id',newUid);
			$('#pipeline #'+newUid).removeClass('node'); // 删除掉node class，保证随意拖动图标时不会再次触发drop action
			$('#uid').val(newUid);
		}
	});
	
	function createNodeData(uid, name, content){
		var div = $('<div class="nodeData"></div>');div.attr('id', uid+'_data');
		var nameDiv=$('<div class="nodeData_name">'+chkAndModify(name)+'</div>');nameDiv.attr('node-id',uid);
		var actionsDiv=$('<div class="nodeData_actions"><a href="#" title="Edit" class="ui-icon ui-icon-pencil">Edit</a><a href="#" title="Delete" class="ui-icon ui-icon-trash">Delete</a><div>');actionsDiv.attr('node-id',uid);
		var titleDiv=$('<div class="nodeData_title"></div>');
		var contentDiv=$('<div class="nodeData_content">'+chkAndModify(content)+'</div>');contentDiv.attr('node-id',uid);
		nameDiv.appendTo(titleDiv);actionsDiv.appendTo(titleDiv);titleDiv.appendTo(div);contentDiv.appendTo(div);div.appendTo($('#chartContent'));
		
		// register the click action for actions link
		$('.nodeData a').click(function(){handleClick($(this));});
	}
	function deleteNode(uid){
		$('#delete-confirm-dialog').dialog({
			resizable: false,
			height:150,
			modal: true,
			buttons: {
				'Delete': function(){$('#'+uid+'_data').remove();$('#'+uid).remove();$(this).dialog('close');},
				Cancel: function(){$(this).dialog('close');}
			}
		});
	}
	function editNode(uid){
		$('#uid').val(uid);
		$('#name').val($('.nodeData_name[node-id='+uid+']').text());
		$('#content').val($('.nodeData_content[node-id='+uid+']').text());
		$dialog.dialog('open');
	}
	function handleClick($item){
		var op=$item.attr('title');
		var uid=$item.parent().attr('node-id');
		if(op=='Edit'){
			editNode(uid);
		}else if(op=='Delete'){
			deleteNode(uid);
		}
	}
	function saveNode(){
		var uid = $('#uid').val();
		var name = $('#name').val();
		var content = $('#content').val();
		if(name.length==0||content.length==0){ // 检验数据
			if(name.length==0){$('#name').focus();showMsg($('#dialogMsg'),'error','名称字段不能为空!',3000);return false;}
			if(content.length==0){$('#content').focus();showMsg($('#dialogMsg'),'error','内容字段不能为空!',3000);}
			return false;
		}
		
		if($('#'+uid+'_data').length<=0){ // 添加
			counter++;
			createNodeData(uid, name, content);
			return true;
		}else{ // 编辑
			$('.nodeData_name[node-id='+uid+']').html(chkAndModify(name));
			$('.nodeData_content[node-id='+uid+']').html(chkAndModify(content));
			return true;
		}
	}
	function showMsg($item, msgType, msg, timeout){
		var classType='ui-state-highlight';
		if(msgType=='error'){
			classType='ui-state-error';
		}
		$item.addClass(classType);
		$item.html("<span class='ui-icon ui-icon-info' style='float: left; margin-right: .3em;'></span>"+msg);
		setTimeout(function(){$item.html('').removeClass(classType);},timeout);
	}
	function submitFlow(){
		if($('.nodeData').length==0){
			alert('必须至少添加一个流程结点!');
			return;
		}
		var type=name=content='';
		$('.nodeData').each(function(index){
			var uid=$($('.nodeData')[index]).attr('id');
			type+=uid.substring(uid.indexOf('_')+1,uid.indexOf('_',uid.indexOf('_')+1))+'-';
			name+=$($('.nodeData_name')[index]).text()+'-';
			content+=$($('.nodeData_content')[index]).text()+'-';
		});
		type=type.substring(0,type.length-1);
		name=name.substring(0,name.length-1);
		content=content.substring(0,content.length-1);
		var	flowData='{"type":"'+type+'","name":"'+name+'","content":{"value":"'+content+'"}}';
		$.ajax({
			url: '/flows/ajax/create',
			data: 'packId=${it}&flow='+flowData,
			type: 'POST',
			timeout: 15000,
			error: function(){showMsg($('#message'),'error','流程提交失败!',3000);},
			success: function(response){
				if(response.search('ERROR')!=-1){
					showMsg($('#message'),'error','流程分享失败!',3000);
				}else{
					showMsg($('#message'),'info','流程分享成功!',3000);
					setTimeout(function(){window.location.href='/myFlows';},3000);
				}
			}
		});
	}
	function chkAndModify(str){
		str=str.split('-').join('_');
		str=str.split('@').join(' AT ');
		return str;
	}
	$('#btnSubmit').button().click(function(){$(this).attr('disabled',true);submitFlow();$(this).attr('disabled',false);});
});
</script>
<table>
	<tr>
		<td colspan="2">
		<h2>[创建流程]&nbsp;<font class="tip">将流程结点拖动到流程执行通道中，即可开始进行流程创建。</font></h2>
		</td>
	</tr>
	<tr>
		<td>
		<div id="processChart">
		<table>
			<tr>
				<td>
				<div id="pipeline">
				<h3 style="border-bottom: 1px solid #fdf;">流程执行通道</h3>
				</div>
				</td>
				<td>
				<div id="chartContent">
				<h3 style="border-bottom: 1px solid #fdf;">流程内容描述</h3>
				</div>
				</td>
			</tr>
		</table>
		</div>
		<div class="btnContainer">
		<button id="btnSubmit">提交流程</button>
		</div>
		</td>
		<td>
		<div id="nodeBox">
		<h3>可用流程结点</h3>
		<ul id="nodeList">
			<li><img id="node_0" class="node" alt="memo" title="memo"
				src="<c:url value="/images/0_memo.png" />" /></li>
			<li><img id="node_1" class="node" alt="phone" title="phone"
				src="<c:url value="/images/1_phone.png" />" /></li>
			<li><img id="node_2" class="node" alt="schedule"
				title="schedule" src="<c:url value="/images/2_schedule.png" />" /></li>
			<li><img id="node_3" class="node" alt="shopping"
				title="shopping" src="<c:url value="/images/3_shopping.png" />" /></li>
			<li><img id="node_4" class="node" alt="link" title="link"
				src="<c:url value="/images/4_link.png" />" /></li>
			<li><img id="node_5" class="node" alt="audio" title="audio"
				src="<c:url value="/images/5_audio.png" />" /></li>
			<li><img id="node_6" class="node" alt="video" title="video"
				src="<c:url value="/images/6_video.png" />" /></li>
		</ul>
		</div>
		</td>
	</tr>
</table>

<div id="edit-node-dialog" class="nodeDialog" title="流程结点信息">
<div id="dialogMsg" class="ui-widget"></div>
<form>
<fieldset class="ui-helper-reset"><input type="hidden"
	id="uid" name="uid" value="" /><label for="name">名称</label><br />
<input type="text" id="name" name="name" value=""
	class="ui-widget-content" /><br />
<label for="content">内容</label><br />
<textarea id="content" name="content"
	class="ui-widget-content"></textarea></fieldset>
</form>
</div>

<div id="delete-confirm-dialog" title="删除流程结点">
<p><span class="ui-icon ui-icon-alert"
	style="float: left; margin: 0 7px 20px 0;"></span>确认删除流程结点?</p>
</div>
